<template>
    <div>
        <el-form :inline="true" :model="circleSearchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="circleSearchParam.title"
                    placeholder="圈子标题"
                />
            </el-form-item>
            <el-form-item>
                <el-select
                    clearable
                    v-model="circleSearchParam.disabled"
                    placeholder="禁用启用"
                >
                    <el-option label="启用" value="false"/>
                    <el-option label="禁用" value="true"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select
                    clearable
                    v-model="circleSearchParam.status"
                    placeholder="请选择状态"
                >
                    <el-option label="待审核" value="1"/>
                    <el-option label="未通过" value="2"/>
                    <el-option label="已通过" value="3"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select clearable v-model="circleSearchParam.createSchoolUuid" placeholder="请选择学校">
                    <el-option v-for="school in data.schools" :key="school.uuid" :label="school.name"
                               :value="school.uuid"/>
                </el-select>
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" @click="search" size="small">查询</el-button>
                <el-button type="primary" @click="exportCircleData" size="small">导出圈子</el-button>
                <el-button type="warning" @click="batchDisableCircle" size="small">批量禁用</el-button>
                <el-button type="success" @click="batchEnableCircle" size="small">批量启用</el-button>
                <el-button type="danger" @click="batchDeleteCircle" size="small">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.circles" border style="width: 100%" v-loading="data.circleLoading"
                  element-loading-text="拼命加载中" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="70px"/>
            <el-table-column fixed prop="title" label="圈子标题" align="center" width="300px"/>
            <el-table-column prop="avatar" label="圈子头像" align="center" width="150px">
                <template #default="scope">
                    <el-avatar
                        :src="scope.row.avatar"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="description" label="圈子描述" align="center" width="300px"/>
            <el-table-column prop="createUserNickName" label="创建人" align="center" width="200px"/>
            <el-table-column prop="createSchoolName" label="创建学校" align="center" width="300px"/>
            <el-table-column prop="labels" label="标签" align="center" width="400px">
                <template #default="scope">
                    <el-tag v-for="lable in scope.row.labels" :key="lable" style="margin: 5px">{{ lable }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="disable" label="禁用启用" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.disabled === false ? 'success' : 'warning'"
                        disable-transitions
                    >{{ scope.row.disabled === false ? "启用" : "禁用" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        type="warning"
                        disable-transitions
                        v-if="scope.row.status === 1"
                    >待审核
                    </el-tag>
                    <el-tag
                        type="danger"
                        disable-transitions
                        v-if="scope.row.status === 2"
                    >未通过
                    </el-tag>
                    <el-tag
                        type="success"
                        disable-transitions
                        v-if="scope.row.status === 3"
                    >已通过
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="viewCount" label="浏览数量" align="center" width="100px"/>
            <el-table-column prop="followCount" label="关注数量" align="center" width="100px"/>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="300" align="center">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="viewExamine(scope.row)"
                        v-if="scope.row.status === 1"
                        type="primary"
                        size="small"
                    >审核
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="viewFollowUser(scope.row.uuid)"
                        type="info"
                        size="small"
                    >关注列表
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="toDetail(scope.row.uuid)"
                        type="info"
                        size="small"
                    >详情
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="enableCircle(scope.row.uuid)"
                        v-if="scope.row.disabled"
                        type="success"
                        size="small"
                    >启用
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="disableCircle(scope.row.uuid)"
                        v-if="!scope.row.disabled"
                        type="warning"
                        size="small"
                    >禁用
                    </el-button>
                    <el-popconfirm
                        title="你确定要删除该圈子吗？"
                        confirm-button-text="是"
                        cancel-button-text="否"
                        @confirm="deleteCircle(scope.row.uuid)"
                    >
                        <template #reference>
                            <el-button
                                class="button-space"
                                type="danger"
                                size="small"
                            >删除
                            </el-button>
                        </template>

                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="data.circleTotal"
            style="text-align: center; margin-top: 10px"
            @current-change="currentChangeCircle"
        >
        </el-pagination>
        <!-- 用户关注列表 -->
        <el-dialog v-model="data.followUserListDisable" title="关注列表" width="70%">
            <el-table :data="data.followUsers" border style="width: 100%" v-loading="data.loading"
                      element-loading-text="拼命加载中">
                <el-table-column prop="followUserAvatar" label="用户头像" align="center" width="150px">
                    <template #default="scope">
                        <el-avatar
                            :src="scope.row.followUserAvatar"
                        />
                    </template>
                </el-table-column>
                <el-table-column property="followUserNickName" label="用户昵称" width="150px"/>
                <el-table-column property="followTime" label="关注时间"/>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="data.circleFollowTotal"
                style="text-align: center; margin-top: 10px"
                @current-change="currentChangeCircleFollow"
            >
            </el-pagination>
        </el-dialog>
        <!-- 审核页面 -->
        <el-dialog v-model="data.examineDisable" title="圈子审核" width="70%">
            <el-form :model="data.circleDetail" ref="examineRef" :rules="rules">
                <el-form-item label="圈子标题" label-width="130px">
                    <el-input v-model="data.circleDetail.title" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="圈子描述" label-width="130px">
                    <el-input type="textarea" v-model="data.circleDetail.description" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="圈子头像" label-width="130px">
                    <el-avatar
                        :src="data.circleDetail.avatar"
                    />
                </el-form-item>
                <el-form-item label="创建学校" label-width="130px">
                    <el-input v-model="data.circleDetail.createSchoolName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="创建人" label-width="130px">
                    <el-input v-model="data.circleDetail.createUserNickName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="标签" label-width="130px">
                    <el-tag v-for="lable in data.circleDetail.labels" :key="lable" style="margin: 5px">{{
                            lable
                        }}
                    </el-tag>
                </el-form-item>
                <el-form-item label="审核状态" label-width="130px" prop="examineStatus" required>
                    <el-select v-model="data.circleDetail.examineStatus" class="m-2" placeholder="请选择审核状态"
                               size="large"
                               @change="selectExamineStatus">
                        <el-option
                            v-for="item in examineStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="未通过原因" label-width="130px" prop="noPassReason"
                              required
                              v-if="data.noPassReasonDisable">
                    <el-input v-model="data.circleDetail.noPassReason" autocomplete="off" type="textarea"/>
                </el-form-item>
                <el-form-item label-width="130px">
                    <el-button @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {reactive, onMounted, ref} from "vue";
import {
    deleted,
    disable,
    enable,
    exportCircle,
    page,
    pageByCircleUuid,
    batchEnable,
    batchDisable,
    batchDelete,
    pass,
    noPass
} from "@/api/circle/circle";
import {all} from "@/api/school/school";
import {ElLoading, ElMessage} from "element-plus";
import dayjs from "dayjs";
import {useRouter} from "vue-router";

export default {
    setup() {
        const router = useRouter();
        const data = reactive({
            circles: [],
            circleTotal: 0,
            schools: [],
            circleLoading: false,
            followUserListDisable: false,
            followUsers: [],
            circleFollowTotal: 0,
            // 当前圈子uuid，主要是用来查询关注用户使用
            currentCircleUuid: '',
            selectUuids: [],
            circleDetail: '',
            examineDisable: false,
            noPassReasonDisable: false
        })
        const circleSearchParam = reactive({
            page: 1,
            size: 10,
            createSchoolUuid: '',
            disabled: '',
            status: ''
        })
        const circleFollowSearchParam = reactive({
            page: 1,
            size: 10
        })
        const examineStatus = [
            {
                "value": 1,
                "label": "通过"
            },
            {
                "value": 2,
                "label": "不通过"
            }
        ]
        const examineRef = ref(null)
        const examineRo = reactive({
            noPassReason: '',
            uuid: ''
        })
        const rules = reactive({
            examineStatus: [
                {
                    required: true,
                    message: "请选择审核状态",
                    trigger: "blur",
                },
            ],
            noPassReason: [
                {
                    required: true,
                    message: "请输入未通过原因",
                    trigger: "blur",
                },
            ]
        })
        /**
         * 分页查询圈子
         */
        const pageSearchCircle = () => {
            data.circleLoading = true
            page(circleSearchParam).then(res => {
                data.circles = res.data.records
                data.circleTotal = res.data.total
                data.circleLoading = false
            })
        }
        /**
         * 获取全部学校
         * @returns {Promise<void>}
         */
        const allSchool = async () => {
            all().then(res => {
                data.schools = res.data
            })
        }
        /**
         * 搜索查询学校
         * @returns {Promise<void>}
         */
        const search = async () => {
            data.circleLoading = true
            page(circleSearchParam).then(res => {
                data.circles = res.data.records
                data.circleTotal = res.data.total
            }).finally(() => {
                data.circleLoading = false
            })
        }
        /**
         * 查看关注用户列表
         * @param uuid
         */
        const viewFollowUser = (uuid) => {
            data.followUserListDisable = true;
            data.currentCircleUuid = uuid
            pageByCircleUuid(circleFollowSearchParam, uuid).then(res => {
                data.followUsers = res.data.records
                data.circleFollowTotal = res.data.total
            })
        }
        /**
         * 点击页数查询关注用户列表
         * @param value
         */
        const currentChangeCircleFollow = (value) => {
            circleFollowSearchParam.page = value
            pageByCircleUuid(circleFollowSearchParam, data.currentCircleUuid).then(res => {
                data.followUsers = res.data.records
                data.circleFollowTotal = res.data.total
            })
        }
        /**
         * 点击页数查询圈子
         * @param value
         */
        const currentChangeCircle = (value) => {
            circleSearchParam.page = value
            pageSearchCircle()
        }
        /**
         * 启用圈子
         * @param uuid
         */
        const enableCircle = (uuid) => {
            enable(uuid).then(() => {
                ElMessage({
                    message: '启用成功',
                    type: 'success',
                })
                circleSearchParam.page = 1
                pageSearchCircle()
            })
        }
        /**
         * 禁用圈子
         * @param uuid
         */
        const disableCircle = (uuid) => {
            disable(uuid).then(() => {
                ElMessage({
                    message: '禁用成功',
                    type: 'success',
                })
                circleSearchParam.page = 1
                pageSearchCircle()
            })
        }
        /**
         * 删除圈子
         * @param uuid
         */
        const deleteCircle = (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                circleSearchParam.page = 1
                pageSearchCircle()
            })
        }
        /**
         * 导出圈子数据
         */
        const exportCircleData = () => {
            const loading = ElLoading.service({
                lock: true,
                text: '导出中...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            exportCircle(circleSearchParam).then(res => {
                const blob = new Blob([res]);
                const day = dayjs().format('YYYY-MM-DD');
                const fileName = `圈子列表${day}.xls`;
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
                loading.close()
            })
        }
        /**
         * 选中操作
         * @param selection
         */
        const handleSelectionChange = (selection) => {
            data.selectUuids = selection.map(select => {
                return select.uuid
            })
        }
        /**
         * 批量禁用
         */
        const batchDisableCircle = () => {
            if (data.selectUuids.length <= 0) {
                ElMessage({
                    message: '至少选择一个圈子',
                    type: 'warning',
                })
                return
            }
            batchDisable(data.selectUuids).then(() => {
                ElMessage({
                    message: '禁用成功',
                    type: 'success',
                })
                pageSearchCircle()
            })
        }
        /**
         * 批量启用
         */
        const batchEnableCircle = () => {
            if (data.selectUuids.length <= 0) {
                ElMessage({
                    message: '至少选择一个圈子',
                    type: 'warning',
                })
                return
            }
            batchEnable(data.selectUuids).then(() => {
                ElMessage({
                    message: '启用成功',
                    type: 'success',
                })
                pageSearchCircle()
            })
        }
        /**
         * 批量删除
         */
        const batchDeleteCircle = () => {
            if (data.selectUuids.length <= 0) {
                ElMessage({
                    message: '至少选择一个圈子',
                    type: 'warning',
                })
                return
            }
            batchDelete(data.selectUuids).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearchCircle()
            })
        }
        /**
         * 审核
         * @param row
         */
        const viewExamine = (row) => {
            data.examineDisable = true
            data.circleDetail = row
            data.circleDetail.examineStatus = ''
            data.circleDetail.noPassReason = ''
        }
        /**
         * 提交
         */
        const submit = async () => {
            examineRef.value.validate((valid) => {
                if (!valid) {
                    return false;
                }
                examineRo.noPassReason = data.circleDetail.noPassReason
                examineRo.uuid = data.circleDetail.uuid
                // 审核通过
                if (data.circleDetail.examineStatus === 1) {
                    pass(examineRo).then(() => {
                        ElMessage({
                            message: '审核成功',
                            type: 'success',
                        })
                        data.examineDisable = false
                        pageSearchCircle()
                    })
                }
                // 不通过
                if (data.circleDetail.examineStatus === 2) {
                    noPass(examineRo).then(() => {
                        ElMessage({
                            message: '审核成功',
                            type: 'success',
                        })
                        data.examineDisable = false
                        pageSearchCircle()
                    })
                }

            })
        }
        /**
         * 选中审核状态
         */
        const selectExamineStatus = (val) => {
            data.circleDetail.examineStatus = val
            if (val === 1) {
                data.noPassReasonDisable = false
            }
            if (val === 2) {
                data.noPassReasonDisable = true
            }
        }
        /**
         * 圈子详情
         * @param uuid
         */
        const toDetail = (uuid) => {
            router.push({path: "/treeHole/circle/detail", query: {uuid: uuid}})
        }
        onMounted(() => {
            pageSearchCircle()
            allSchool()
        })
        return {
            data,
            circleSearchParam,
            examineStatus,
            examineRef,
            rules,
            search,
            viewFollowUser,
            currentChangeCircleFollow,
            currentChangeCircle,
            enableCircle,
            disableCircle,
            deleteCircle,
            exportCircleData,
            handleSelectionChange,
            batchDisableCircle,
            batchEnableCircle,
            batchDeleteCircle,
            viewExamine,
            submit,
            selectExamineStatus,
            toDetail
        }
    }
}
</script>